<template>
  <z-paging ref="paging" v-model="dataList" @query="queryList" bgColor="#f6f6f6" :auto="false">
    <template #top>
      <uv-navbar placeholder title="创意" leftIcon=" " :autoBack="true"></uv-navbar>
      <view class="tabs">
        <uv-tabs :list="tabsList" keyName="title" :current="current" @click="getTabs" lineColor="transparent"
          :activeStyle="formData.activeStyle" :inactiveStyle="formData.inactiveStyle"
          :itemStyle="formData.itemStyle"></uv-tabs>
      </view>
    </template>
    <view class="originality-box">
      <view class="p-x-32 m-t-30 flex-wra justify-bet">
        <view class="originality m-b-28" v-for="(item, index) in dataList" :key="index"
          @click="getcreativeDetail(item)">
          <view>
            <uv-image width="328rpx" height="382rpx" :src="item.image"></uv-image>
          </view>
          <view class="p-x-22 m-t-22 font-26 font-weight-bold text-ellipsis-2" style="height: 76rpx;">
            {{ item.title }}
          </view>
          <view class="flex align-ali justify-bet p-x-22 m-t-auto">
            <view class="font-22 text-666">
              {{ item.user_name || '--' }}
            </view>
            <view class="flex align-ali m-t-16 p-x-22 iconNumber m-b-22">
              <!-- <view>
         	    <uv-image width="28rpx" height="28rpx" :src="ASSETSURL + 'borrow.png'"></uv-image>
         	  </view> -->
              <view class="font-26 font-weight-bold m-l-10">{{ item.reference_num || 0 }}</view>
              <view class="font-26 text-greey m-l-10">人借鉴</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <template #bottom>
      <tabbar :number="number"></tabbar>
    </template>
  </z-paging>
</template>

<script setup>
import { getStyle, getOriginalityList } from '@/api/api.js';
import { ref, onMounted, reactive } from 'vue';
import { useStore } from 'vuex';
import { onReachBottom, onShow, onReady, onLoad } from '@dcloudio/uni-app';
import route from '@/uni_modules/uv-ui-tools/libs/util/route.js';
const styleId = ref(null); //风格id
const paging = ref(null);
const isOverShare = ref(true);
const dataList = ref([]);
const number = ref(3);
const current = ref(0);
const formData = reactive({
  activeStyle: {
    'font-family': 'Source Han Sans CN',
    'font-weight': '700',
    'font-size': '32rpx'
  },
  inactiveStyle: {
    'font-family': 'Source Han Sans CN',
    'font-weight': '500',
    'font-size': '32rpx',
    color: '#B5B5B5'
  },
  itemStyle: {
    height: '47rpx',
    'line-height': '47rpx',
    marginTop: '18rpx'
  },
  sortList: [
    {
      name: '价格排序',
      icon: 'price',
      active: 1
    },
    {
      name: '销量排序',
      icon: 'price',
      active: 2
    }
  ]
});
const tabsList = ref(null);
// 创意列表

const queryList = (page, limit) => {
  getOriginalityList({ page, limit, style_id: styleId.value }).then((res) => {
    console.log(res, '-----创意列表------');
    paging.value.complete(res.data.data);
  });
};
//创意风格
const getStyles = () => {
  getStyle().then((res) => {
    console.log(res, '-----创意风格------');
    tabsList.value = [{ title: '全部', id: null }, ...res.data];
  });
};
// 选择风格
const getTabs = (e) => {
  if (e.id == styleId.value) return;
  console.log(e, '----选择风格----');
  current.value = e.index;
  styleId.value = e.id;
  paging.value.reload();
};

// 创意详情
const getcreativeDetail = (e) => {
  route({
    url: 'pagesA/pages/originality/creativeDetails',
    params: {
      id: e.id
    }
  });
};
onShow(() => {
  getStyles();
  setTimeout(() => {
    console.log(paging.value, 'paging.value');

    paging.value.reload();
  }, 100);
});
</script>

<style lang="scss" scoped>
.box {
  min-height: 100vh;
  background: #f6f6f6;
}

.tabs {
  padding: 0 32rpx;
  box-sizing: border-box;
  background: linear-gradient(180deg, #fff 0%, #fff 10%, #fff 10%, #f6f6f6 100%);
}

.originality-box {
  background: linear-gradient(180deg, #fff 0%, #fff 10%, #fff 10%, #f6f6f6 100%);
}

.originality {
  width: 328rpx;
  background: #fff;
  box-shadow: 0px 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.17);
  border-radius: 12rpx;
  overflow: hidden;

  .iconNumber {
    justify-content: flex-end;
    line-height: normal;
  }
}
</style>
